import type { App, Directive, DirectiveBinding } from "vue";
import { usePermissions } from "../hooks/usePermissions";

const isAuth = (el: Element, binding: DirectiveBinding) => {
  const { hasPermission } = usePermissions();

  const value = binding.value;

  if (!value) return;
  if (!hasPermission(value)) {
    el.parentNode?.removeChild(el);
  }
};

const mounted = (el: Element, binding: DirectiveBinding<any>) => {
  isAuth(el, binding);
};

const authDirective: Directive = {
  mounted,
};

export function setupPermissionDirective(app: App) {
  app.directive("auth", authDirective);
}

export default authDirective;
